<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .tab{width:480px;height:400px;border: solid 1px black;margin: 0 auto;}
        .tab .btns{height:40px;border-bottom: solid 1px black;line-height: 40px;display: flex;text-align:center;}
        .tab .btns span{flex:1;border-right:solid 1px black;cursor: pointer;}
        .tab .btns span:last-child{border-right:none;}
        .tab .btns span.active{background: red;color:white;}
        

        .tab .conts .cont{width:480px;height:359px;color: #fff;font-size: 50px;display:none}
        .tab .conts .cont:nth-child(1){background: #399;}
        .tab .conts .cont:nth-child(2){background: #393;}
        .tab .conts .cont:nth-child(3){background: #993;}
        .tab .conts .cont:nth-child(4){background: #933;}
        .tab .conts .cont:nth-child(5){background: #939;}
        .tab .conts .cont:nth-child(6){background: #339;}

    </style>
</head>
<body>
    <div class="tab">
        <div class="btns">
            <span>选项1</span>
            <span>选项2</span>
            <span>选项3</span>
            <span>选项4</span>
            <span>选项5</span>
            <span>选项6</span>
        </div>
        <div class="conts">
            <div class="cont">内容1</div>
            <div class="cont">内容二</div>
            <div class="cont">三内容</div>
            <div class="cont">4内容</div>
            <div class="cont">伍内容</div>
            <div class="cont">six内容</div>
        </div>
    </div>
</body>
<script>
    // 1. 选择元素
    var spans = document.querySelectorAll(".tab .btns span");
    var conts = document.querySelectorAll(".tab .conts .cont");
    // 3. 设置默认选中的项
    var index = 0;
    spans[index].className = "active";
    conts[index].style.display = "block";
    // 2. 绑定事件
    for(var i=0;i<spans.length;i++){
        spans[i].onclick = function(){
            // 3. 取消上一个点击元素的当前项
            spans[index].className = "";
            conts[index].style.display = "none";
            // 4. 给点击的元素，添加当前项
            this.className = 'active';
            // 6. 获取本次点击按钮的索引
            // console.log(this.index);
            // 7. 根据当前点击按钮的索引，显示内容
            conts[this.index].style.display = "block";
            // 8. 将本次点击按钮的索引 设置给 初始值
            // 用于作为下一次点击要清除当前项的元素的索引
            index = this.index;
        }
    }
    // 5. 给每个按钮提前绑定索引
    for(var i=0;i<spans.length;i++){
        spans[i].index = i;
    }

    // 问题：再循环内绑定事件，在事件处理函数内，无法获取循环每次的计数器
    // 因为：循环瞬间执行完毕，而事件会等待用户触发。当用户触发到事件时，循环早就已经结束了
    // 所以：在事件处理函数内，只能获取到循环结束后的计数器

</script>
</html>